<template>
  <div>黑马92期--{{ count }}</div>
  <div>
    <button @click="updateCount">修改count</button>
  </div>
</template>

<script>
import { ref } from 'vue';
// vue3 从发展到现在使用的流程，经历多很多改动，我们现在这节课就是学他之前的旧语法
export default {
  // 1.setup就是一个生命周期函数，比beforeCreate还早
  // 2.setup不需要使用this，也不能使用
  // 3.如果数据或者函数 需要是模板中使用，必须在setup函数里面返回，通过return 对象出去
  setup() {
    // 响应式： js 和 html模板 里面的数据 双向的
    // let count = 100; // 如果这样定义变量是没有响应式的

    // ref的值在js里面 通过 count.value 去使用
    // ref的值在html里面 直接使用 count，不需要，html模板帮我们自动解构
    const count = ref(1);
    console.log(count.value);
    const updateCount = () => {
      count.value++;
      console.log('我是setup里面的函数 ', count.value);
    };

    return {
      count,
      updateCount,
    };
  },
};
</script>
